<template>
  <el-dialog v-model="dialogVisible" title="员工详情" width="640">
    <el-row justify="space-around" :gutter="20">
      <el-col :span="12">
        <el-descriptions border column="1">
          <el-descriptions-item label="员工号">{{
            empInfo.idNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="员工姓名">{{
            empInfo.name
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            empInfo.sex == 1 ? '男' : empInfo.sex == 0 ? '女' : '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            empInfo.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="员工账号">{{
            empInfo.username
          }}</el-descriptions-item>
          <el-descriptions-item label="账号状态">
            <el-tag v-if="empInfo.status" type="success" effect="dark" round>
              启用 </el-tag
            ><el-tag v-else type="danger" effect="dark" round>禁用</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="12">
        <el-image
          style="width: 240px; height: 240px"
          :src="'/api/common/download?name=' + empInfo.avatar"
          fit="fill"
        />
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

//给当前组件命名
defineOptions({
  name: 'EmployeeDetail'
})

const dialogVisible = ref(false)

// 本员工信息
const empInfo = ref([])

// 打开对话框
const open = async (emp) => {
  empInfo.value = emp
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>

<style scoped></style>
